@import './Suggest.scss';
@import './MenubarBtns.scss';

.menuBar-SearchBox_Wrap {
  flex: 2;
  position: relative;

  &.isExpand {
    flex: 7;
  }

  @include isAnimate {
    transition: flex 0.6s;
  }
}

.menuBar-SearchBox {
  width: 100%;
  box-sizing: border-box;
  padding: 0 5px;
  border: 0 none;
  outline: 0 none;
  color: #fff;
  background-color: rgba(225, 225, 225, 0.1);
}

.menuBar-SearchBox_Suggests {
  position: absolute;
  left: 0;
  top: 30px;
  z-index: 1000;
}

.csst-menuBar-SearchBox_Suggests {
  @include isAnimate(-enter) {
    opacity: 0;
    transition: opacity 0.4s;
  }

  @include isAnimate(-enter-active, -exit) {
    opacity: 1;
    transition: opacity 0.4s;
  }

  @include isAnimate(-exit-active) {
    opacity: 0;
    transition: opacity 0.4s;
  }
}
